<!--  -->
<template>
  <div class="trade all">
    <GeminiScrollbar :ops="ops" class="table-box">
      <table class="trade-table">
        <thead>
          <tr>
            <th class="index">盘口</th>

            <th class="price">单价(CNY)</th>
            <th class="amount">数量(USDT)</th>
            <th class="total_money">总金额(CNY)</th>
            <th class="limit">单笔限额(CNY)</th>
            <th class="trade">商家 (成交单数/完成率)</th>
            <th class="pay">支付方式</th>
            <th class="operation">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td class="index">{{index}}</td>
            <td class="price">{{item.price}}</td>
            <td class="amount">{{item.amount}}</td>
            <td class="total_money">{{item.total_money}}</td>
            <td class="limit">{{item.limit_min}}-{{item.limit_max}}</td>
            <td class="trade">{{item.merchant}}</td>
            <td class="pay">
              <i class="iconfont icon-yinxingqia"></i>
              <i class="iconfont icon-wechat"></i>
              <i class="iconfont icon-iconfontrectangle390"></i>
            </td>
            <td class="operation">
              <el-button @click="drawer=true" type="primary" plain>购买USDT</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </GeminiScrollbar>
    <el-tabs v-model="activeName" class="tabs-box">
      <el-tab-pane label="未完成订单" name="unfinished">
          <component :is="'orderList'"></component>
      </el-tab-pane>
      <el-tab-pane label="已完成订单" name="finished"><component :is="'orderList'"></component></el-tab-pane>
      <el-tab-pane label="已取消订单" name="canceled"><component :is="'orderList'"></component></el-tab-pane>
      <el-tab-pane label="我的委托单" name="entrust"><component :is="'orderList'"></component></el-tab-pane>
      <el-tab-pane label="申诉中订单" name="complaint"><component :is="'orderList'"></component></el-tab-pane>
    </el-tabs>
    <!-- 订单抽屉 -->
    <el-drawer
      title="订单抽屉"
      :visible.sync="drawer"
      :close="handleClose"
      :with-header="false"
      class="drawer-box"
      customClass="customWidth"
    >
      <div class="detail-box">
        <h2 class="title">购买USDT</h2>
        <GeminiScrollbar :ops="ops" class="scoll-box">
          <div class="step-box">
            <div class="item">
              <i class="iconfont icon-tijiao"></i>
              <span class="tips">下订单</span>
            </div>
            <em class="line"></em>
            <div class="item">
              <i class="iconfont icon-tijiao"></i>
              <span class="tips">去线下付款</span>
            </div>
            <em class="line"></em>
            <div class="item">
              <i class="iconfont icon-tijiao"></i>
              <span class="tips">点击已付款</span>
            </div>
            <em class="line"></em>
            <div class="item">
              <i class="iconfont icon-tijiao"></i>
              <span class="tips">等待放币</span>
            </div>
          </div>
          <div class="detail-info-box">
            <h2>委托单信息</h2>
            <ul class="list-box">
              <li>
                <span class="title">委托单号</span>
                <span class="content">200032</span>
              </li>
              <li>
                <span class="title">币种</span>
                <span class="content">USDT</span>
              </li>
              <li>
                <span class="title">单笔限额(CNY)</span>
                <span class="content">5,000 - 212,459.42</span>
              </li>
              <li>
                <span class="title">单价(CNY)</span>
                <span class="content">6.96</span>
              </li>
              <li>
                <span class="title">总金额(CNY)</span>
                <span class="content">212,459.42</span>
              </li>
              <li>
                <span class="title">数量(USDT)</span>
                <span class="content">30,525.78</span>
              </li>
            </ul>
          </div>
          <div class="detail-info-box">
            <h2>对手信息</h2>
            <ul class="list-box">
              <li>
                <span class="title">卖家姓名</span>
                <span class="content">小白菜专业商家</span>
              </li>
              <li>
                <span class="title">法币注册时间</span>
                <span class="content">2020-06-19</span>
              </li>
              <li>
                <span class="title">认证等级</span>
                <span class="content">v3</span>
              </li>
              <li>
                <span class="title">成交单数</span>
                <span class="content">2,016</span>
              </li>
              <li>
                <span class="title">完成率</span>
                <span class="content">99.35%</span>
              </li>
              <li>
                <span class="title">对手卖币单数</span>
                <span class="content">0</span>
              </li>
              <li>
                <span class="title">卖家提示</span>
                <span class="content">1、付款账号必须和OK的注册账户是同一个人，否则扣款举报； 2、付款信息中不要备注！不要备注！</span>
              </li>
              <li>
                <span class="title">平均放币时间</span>
                <span class="content">01′19″</span>
              </li>
            </ul>
          </div>
        </GeminiScrollbar>
      </div>

      <div class="form-box">
        <el-form
          :model="tradeForm"
          :rules="rules"
          ref="tradeForm"
          label-width="90px"
          class="trade-form"
          label-position="left"
        >
          <el-form-item label="数量" prop="sum">
            <el-input v-model="tradeForm.sum" placeholder="请输入购买数量"></el-input>
          </el-form-item>
          <el-form-item label="总金额" prop="money">
            <el-input v-model="tradeForm.money" placeholder="请输入购买金额"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <el-button class="btn" @click="drawer=false">取消</el-button>
          <el-button type="primary" class="btn" @click="buyClick()">确认购买</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import orderList from "./ordeList"
export default {
  data() {
    return {
      select: "",
      input3: "",
      tradeForm: {},
      activeName: "unfinished",
      ops: {
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: true,
          keepShow: false,
          background: "#80ffff ",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false
        }
      },
      list: [],
      drawer: false,
      rules: {
        sum: [{ required: true, message: "请输入交易数量", trigger: "blur" }],
        money: [{ required: true, message: "请输入交易金额", trigger: "blur" }]
      }
    };
  },
  components:{
      orderList,
  },
  created() {},
  mounted() {
    this.getDataList();
  },
  methods: {
    handleClose(done) {
      this.$refs["tradeForm"].resetFields();
      this.tradeForm = {};
      this.drawer = false;
    },
    buyClick() {
      this.$refs["tradeForm"].validate(valid => {
        if (valid) {
          this.$message.success("购买操作");
          this.drawer = false;
        } else {
          return false;
        }
      });
    },
    getDataList() {
      this.$api.otc.tradingOrders().then(res => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.all {
  .trade-table {
    .index {
      width: 46px;
      font-weight: normal;
    }
    .price {
      width: 94px;
      text-align: right !important;
    }
    .amount {
      width: 124px;
    }
    .total_money {
      width: 122px;
    }
    .limit {
      width: 132px;
    }
    .trade {
      width: 220px;
    }
    .pay {
      width: 90px;
    }
  }
  .table-box {
    width: 938px;
    height: 526px;
    overflow-y: scroll;
  }
  .tabs-box {
    margin-top: 20px;
  }
}
</style>